<template>
  <div>
    <div class="father">
      <!-- 头我的地址 -->
      <div class="titles">
        <van-nav-bar title="新增地址">
          <template #left>
            <van-icon name="arrow-left" size="18" @click="$router.go(-1)"/>
          </template>
        </van-nav-bar>
      </div>
      <!-- 新增部分 -->
      <van-form>
        <van-field v-model="name" label="联系人" placeholder="输入您的姓名" required/>

        <van-field name="radio">
          <template #input>
            <van-radio-group v-model="radio" direction="horizontal" >
              <van-radio
                name="1"
                :checked-color="$store.state.primary_color_1"
                icon-size="16px"
                >先生</van-radio
              >
              <van-radio
                name="2"
                :checked-color="$store.state.primary_color_1"
                icon-size="16px"
                >女士</van-radio
              >
            </van-radio-group>
          </template>
        </van-field>

        <van-field v-model="phone" label="手机号码" placeholder="手机号码" />
        <!-- <van-field v-model="address" label="地址" readonly placeholder="选择服务地址" >
          <template #button>
            <van-icon name="guide-o" @click="Map"/>
          </template>
        </van-field> -->
        <van-cell-group>
          <van-field
            v-model="value1"
            label="地址"
            right-icon="guide-o"
            placeholder="选择服务地址"
            required
          />
        </van-cell-group>
        <van-field
          v-model="House"
          label="门牌号"
          placeholder="列: 1号楼一单元101室"
          required
        />

        <van-cell-group>
          <van-switch-cell
            v-model="checked"
            title="设为默认地址"
            size="22px"
            :active-color="$store.state.primary_color_1"
            inactive-color="#dcdee0"
          />
        </van-cell-group>

        <div class="btns">
          <van-button
            :color="`linear-gradient(to right, ${$store.state.primary_color_1}, ${$store.state.primary_color_2})`"
            class="bottom-button">
            添加服务地址</van-button>
        </div>
      </van-form>
    </div>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1:'',
      name: "",
      phone: "",
      address: "",
      House: "",
      checked: true,
      radio: "1",
    };
  },
  methods:{
    // Map(){
    //   console.log('加载地图位置');
    // }
  }
};
</script>

<style lang="scss" scoped>
.father {
  height: 100vh;
  background-color: #f7f7f7;
  // 头部css样式
  .titles{
    .van-icon{
      border: 1px solid #888;
      border-radius: 50%;
      padding: 1px;
      color: #888;
      &:active{
        opacity: 0.4;
      }
    }
  }
  .btns {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 40px;
    .bottom-button {
      width: 300px;
      height: 40px;
      line-height: 40px;
      font-size: 17px;
      color: #fff;
      border: none;
      border-radius: 6px;
    }
  }
}
</style>
